<script setup>
import { onMounted, provide, reactive, ref, watch } from "vue";
import { GenerateUglyAvatar } from "ugly-avatar";
import { useRouter } from "vue-router";
import CButton from "@/components/custom_button.vue";
import {
  route_service,
  Breadcrumb,
  flow_menu_title,
  key_menu_title,
  house_menu_title,
  handle_menu_click,
  init_Breadcrumb,
  need_input,
  input_idnum,
  police_menu_title,
} from "@/js/title";
import { idnumStore } from "@/store/idnum";
import { household, search_info } from "@/js/request_params";
import { userStore } from "@/store/user";
import qin_huang_dao_map from "@/components/qin_huang_dao_map.vue";
const user_store = userStore();
const store = idnumStore();
const showTimeout = ref(1000);
const router = useRouter();
const openeds = ref(["1"]);
const render_list = [1, 2, 3];
const update_render_list = () => {
  if (user_store.get_use_info.levelId == 2) {
    render_list.push(4);
  } else if (user_store.get_use_info.levelId == 3) {
    render_list.push(4);
    render_list.push(5);
  } else if (user_store.get_use_info.levelId == 1) {
    render_list.push(1);
    render_list.push(2);
    render_list.push(3);
  }
};
const store_idnum = (value) => {
  store.set_idnum(value);
};
const query_info_by_idnum = () => {
  let fullpath = router.currentRoute.value.fullPath;
  let index = fullpath.lastIndexOf("/");
  if (index != 0) {
    let path = fullpath.substr(index + 1, fullpath.length - 1);
    search_info(index, path, input_idnum.value);
  }
};
const isCollapse = ref(true);
const avatar = new GenerateUglyAvatar();
const svg = avatar.generateFace();
onMounted(() => {
  update_render_list();
  init_Breadcrumb(router.currentRoute.value.fullPath);
  input_idnum.value = store.get_idnum;
});
</script>

<template>
  <div class="h-[100%] w-[100%]">
    <el-container class="h-[100%] w-[100%]">
      <el-aside
        style="transition: all 800ms; overflow: hidden"
        :width="!isCollapse == true ? '70px' : '200px'"
      >
        <!-- 头像等显示 -->
        <!-- 侧边菜单 -->
        <el-menu
          :collapse="!isCollapse"
          :unique-opened="true"
          router
          :show-timeout="showTimeout"
          :default-active="router.currentRoute.value.fullPath"
          :default-openeds="openeds"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span
                :style="[
                  { opacity: !isCollapse == true ? '0' : '1' },
                  { transition: 'all 1s' },
                  { width: !isCollapse == true ? '0' : '100%' },
                  { height: '100%' },
                ]"
                >常住人口管理</span
              >
            </template>
            <el-menu-item
              :index="`/service/${route_service[index]}`"
              @click="handle_menu_click(`1-${index}`)"
              v-for="index in Object.keys(house_menu_title)"
              :key="`1-${index}`"
            >
              <template #title>
                <span>
                  {{ house_menu_title[index] }}
                </span>
              </template>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="important">
            <template #title>
              <el-icon><House /></el-icon>
              <span
                :style="[
                  { opacity: !isCollapse == true ? '0' : '1' },
                  { transition: 'all 1s' },
                  { width: !isCollapse == true ? '0' : '100%' },
                  { height: '100%' },
                ]"
                >重点人口管理</span
              >
            </template>
            <el-menu-item
              v-show="render_list.includes(parseInt(index))"
              :index="`/service/${
                route_service[
                  Object.keys(house_menu_title).length + parseInt(index)
                ]
              }`"
              @click="handle_menu_click(`2-${index}`)"
              v-for="index in Object.keys(key_menu_title)"
              :key="`2-${index}`"
            >
              <template #title>
                <span>
                  {{ key_menu_title[index] }}
                </span>
              </template>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="flow">
            <template #title>
              <el-icon><Bicycle /></el-icon>
              <span
                :style="[
                  { opacity: !isCollapse == true ? '0' : '1' },
                  { transition: 'all 1s' },
                  { width: !isCollapse == true ? '0' : '100%' },
                  { height: '100%' },
                ]"
                >流动人口管理</span
              >
            </template>

            <el-menu-item
              :index="`/service/${
                route_service[
                  Object.keys(house_menu_title).length +
                    Object.keys(key_menu_title).length +
                    parseInt(index)
                ]
              }`"
              @click="handle_menu_click(`3-${index}`)"
              v-for="index in Object.keys(flow_menu_title)"
              :key="`3-${index}`"
            >
              <template #title>
                <span>
                  {{ flow_menu_title[index] }}
                </span>
              </template>
            </el-menu-item>
          </el-sub-menu>

          <template
            v-for="index in Object.keys(police_menu_title)"
            :key="`4-${index}`"
          >
            <el-menu-item
              v-if="user_store.get_use_info.levelId == 3"
              :index="`/service/${
                route_service[
                  Object.keys(house_menu_title).length +
                    Object.keys(key_menu_title).length +
                    +Object.keys(flow_menu_title).length +
                    parseInt(index)
                ]
              }`"
              @click="handle_menu_click(`4-${index}`)"
            >
              <template #title>
                <el-icon><Cpu /></el-icon>
                <span>
                  {{ police_menu_title[index] }}
                </span>
              </template>
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header height="80px">
          <div
            class="shadow-md w-[100%] h-[100%] flex justify-around items-center rounded-md"
          >
            <!-- 控制收缩的按钮 -->
            <el-button
              @click="
                () => {
                  Breadcrumb.sub_menu = null;
                  Breadcrumb.menu_item = null;
                  router.push({
                    path: '/service',
                  });
                }
              "
              >返回主界面</el-button
            >
            <!-- <el-checkbox
              class="shadow-sm"
              v-model="isCollapse"
              label="展开侧边栏"
              :indeterminate="false"
              border
            >
            </el-checkbox> -->
            <span
              style="
                text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
                letter-spacing: 8px;
              "
              class="text-transparent bg-clip-text bg-gradient-to-r from-slate-400 to-slate-700 font-semibold text-4xl tracking-widest font-chinese"
            >
              人口数据库管理系统
            </span>
            <div class="logo-wrapper">
              <img src="@/assets/logo.png" alt="头像" class="circular-image" />
            </div>

            <div class="flex items-center">
              <!-- <el-popover
                placement="right-end"
                :title="`My UserName`"
                width=""
                trigger="hover"
              >
              </el-popover> -->
              <label class="ml-10"> 欢迎登录！ </label>
            </div>
          </div>
        </el-header>
        <el-main class="flex justify-center items-center">
          <!--后续在此渲染子组件-->
          <el-card
            class="w-[100%] h-[100%] rounded-xl"
            shadow="always"
            :body-style="{
              padding: '20px',
              width: '100%',
              height: '100%',
              'padding-bottom': '20px',
            }"
          >
            <template #header>
              <div class="flex justify-between w-[100%] h-[100%] items-center">
                <!-- 可以用来作为面包屑的容器 -->
                <el-breadcrumb separator="/">
                  <el-breadcrumb-item>{{
                    Breadcrumb.sub_menu
                  }}</el-breadcrumb-item>
                  <el-breadcrumb-item>{{
                    Breadcrumb.menu_item
                  }}</el-breadcrumb-item>
                </el-breadcrumb>
                <div
                  class="flex justify-center items-center mr-[50px]"
                  v-if="need_input.includes(router.currentRoute.value.fullPath)"
                >
                  <span class="inline-block relative">身份证号:</span>
                  <el-input
                    clearable="true"
                    style="width: 40%; margin: 0 30px"
                    placeholder="请输入身份证号"
                    v-model="input_idnum"
                  >
                  </el-input>
                  <CButton @click="query_info_by_idnum"> </CButton>
                </div>
              </div>
            </template>
            <!-- card body -->
            <!--后续在此加入切换按钮-->
            <router-view></router-view>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped>
.el-card ::v-deep .el-card__header {
  padding: 15px;
}
:deep(.el-menu) {
  background-color: #ffffff;
  height: 100%;
}
/** :deep(.el-menu-item) {
    background-color: #f7f5f5;
} **/
:deep(.el-scrollbar__view) {
  height: 100%;
}
:deep(.el-scrollbar) {
  width: 100%;
  transition: all 800ms ease-in;
} /**
.el-sub-menu :deep(.el-menu) {
    box-shadow: 1px 2px #0000002b;
}**/
.scroll_collapse {
  width: 32%;
}
.logo-wrapper {
  display: flex;
  align-items: center;
}
.circular-image {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  object-fit: cover;
  border: 2px solid white; /* 可选：添加白色边框 */
}
</style>
